<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>HTML5模拟微信聊天界面</title>  
    <style>  
  /**重置标签默认样式*/   
        * {   
            margin: 0;   
            padding: 0;   
            list-style: none;   
            font-family: '微软雅黑'   
        }   
        #container {   
            width: 450px;   
            background: #eee;
			height:500px;
            overflow-y: auto;
			overflow-x:hidden;
            margin: 40px auto 0;   
            position: relative;   
            box-shadow: 20px 20px 55px #777;   
        }   
        .header {   
            background: #000;
			width:430px;   
            height: 40px;
			z-index:10000;
			position:fixed;
			top:0px;   
            color: #fff;   
            line-height: 34px;   
            font-size: 20px;   
            padding: 0 10px;   
        }   
        .footer {   
            width: 430px;   
            height: 50px;   
            background: #666; top:500px;   
            position:fixed;  
            bottom: 0;   
            padding: 10px;   
        }   
        .footer input {   
            width: 275px;   
            height: 45px;   
            outline: none;   
            font-size: 20px;   
            text-indent: 10px;   
            position: absolute;   
            border-radius: 6px;   
            right: 80px;   
        }   
        .footer span {   
            display: inline-block;   
            width: 62px;   
            height: 48px;   
            background: #ccc;   
            font-weight: 900;   
            line-height: 45px;   
            cursor: pointer;   
            text-align: center;   
            position: absolute;   
            right: 10px;   
            border-radius: 6px;   
        }   
        .footer span:hover {   
            color: #fff;   
            background: #999;   
        }   
        #user_face_icon {   
            display: inline-block;   
            background: red;   
            width: 60px;   
            height: 60px;   
            border-radius: 30px;   
            position: absolute;   
            bottom: 6px;   
            left: 14px;   
            cursor: pointer;   
            overflow: hidden;   
        }   
        img {   
            width: 60px;   
            height: 60px;   
        }   
        .content {   
            font-size: 20px;   
            width: 435px;
			margin-bottom:100px; margin-top:40px;      
            padding: 5px;   
        }   
        .content li {   
            margin-top: 10px;   
            padding-left: 10px;   
            width: 412px;   
            display: block;   
            clear: both;   
            overflow: hidden;   
        }   
        .content li img {   
            float: left;   
        }   
        .content li span{   
            background: #7cfc00;   
            padding: 10px;   
            border-radius: 10px;   
            float: left;   
            margin: 6px 10px 0 10px;   
            max-width: 310px;   
            border: 1px solid #ccc;   
            box-shadow: 0 0 3px #ccc;   
        }   
        .content li img.imgleft {    
            float: left;    
        }   
        .content li img.imgright {    
            float: right;    
        }   
        .content li span.spanleft {    
            float: left;   
            background: #fff;   
        }   
        .content li span.spanright {    
            float: right;   
            background: #7cfc00;   
        }   
    </style>  
{load href="__JS__jquery.min.js"}
    <script>  
	
	function xianshi(n)//浏览器显示未读
	{
	var titleInit = document.title, isShine = true;

setInterval(function() {
    var title = document.title;
    if (isShine == true) {
        if (/新/.test(title) == false) {
            document.title = '【你有'+n+'新消息】';    
        } else {
            document.title = '【　　　　　】';
        }
    } else {
        document.title = titleInit;
    }
}, 500);

window.onfocus = function() {
    isShine = false;
};
window.onblur = function() {
    isShine = true;
};

// for IE
document.onfocusin = function() {
    isShine = false;
};
document.onfocusout = function() {
    isShine = true;
};

}




        window.onload = function(){  
		      onGetMessage();
   
            var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];   
            var url = "{:url('kefu/onchatdata')}"; 
            var num = 0;     //控制头像改变    1自己，0客服  
            var iNow = -1;    //用来累加改变左右浮动   
            var icon = document.getElementById('user_face_icon').getElementsByTagName('img');   
            var btn = document.getElementById('btn');   
            var text = document.getElementById('text');   
			 var imgs = document.getElementById('imgs').src; 
            var content = document.getElementsByTagName('ul')[0];   
            var img = content.getElementsByTagName('img');   
            var span = content.getElementsByTagName('span');   
            
            icon[0].onclick = function(){   
                if(num==0){   
                    this.src = arrIcon[1];   
                    num = 1;    
                }else if(num==1){   
                    this.src = arrIcon[0];   
                    num = 0;    
                }                   
            }   
            btn.onclick = function(){   
                if(text.value ==''){   
                    alert('不能发送空消息');    
                }else {    
                    content.innerHTML += '<li><img src="'+imgs+'"><span>'+text.value+'</span></li>';
                    var neirong = text.value;
					charu(neirong)
					
					 
                    iNow++;   
                    if(num==0){   
                        img[iNow].className += 'imgright';   
                        span[iNow].className += 'spanright';   
                    }else {   
                        img[iNow].className += 'imgleft';   
                        span[iNow].className += 'spanleft';   
                    }   
                    text.value = '';   
                   // 内容过多时,将滚动条放置到最底端   
               container.scrollTop=content.scrollHeight;     
                }   
            }   
        }    
		
		function charu(n)
{
var uid ="{$user.id}";
  $.ajax({
               type: "POST",
               url: "http://www.youdingb.com/hongzhunxing/index.php/Home/Kefu/onchatdata",
               data: {uid:uid,neirong:n},
               async: false,
			   success:function(data){
			   onGetMessage();
			  
			   }

            }).responseText;

}

function onGetMessage() {
//msg.innerHTML+=context;
document.getElementById("msg_end").scrollIntoView(); 
} 

 setInterval(function(){
  var uid ="{$user.id}"
  $.ajax({
           type:'POST',
             url:"{:url('kefu/ajaxchat')}",
              data:{uid:uid},
              dataType:"json",
             success:function(data){
			 
			 if(data.result[0].weidu>0)
			 {
			 xianshi(data.result[0].weidu);
			 }
			 
			 document.getElementById('main').innerHTML="";
                var html = '';   

                $.each(data.result, function(commentIndex, comment){
				            if(comment.k==1)
							{
							
                            if(comment.type==1)
                                  {

                                   html += '<li><img src="http://www.youdingb.com/hongzhunxing/Uploads/logo.png" class="imgleft spanleft"><span class="spanleft"><img src=http://www.youdingb.com/hongzhunxing/'+comment.content+'/></span></li>' 
                                    
                                  }
                                  else if(comment.type==2)
                                  {

                                   html += '<li><img src="http://www.youdingb.com/hongzhunxing/Uploads/logo.png" class="imgleft spanleft"><span class="spanleft">语音</span></li>' 
                                    
                                  }
                                 else {
                            html += '<li><img src="http://www.youdingb.com/hongzhunxing/Uploads/logo.png" class="imgleft spanleft"><span class="spanleft">'+comment.content+'</span></li>' 
                               }
							
							}else{ 
							
                             if(comment.type==1)
                                  {
                                html += ' <li><img src="http://youdingb.com/fenxiao/Admin/images/me.jpg" class="imgright spanright"><span class="spanright"><a target="_blank" href="http://www.youdingb.com/hongzhunxing/'+comment.content+'"> <img src="http://www.youdingb.com/hongzhunxing/'+comment.content+'"/></a></span></li>'

                                  }
                                  else
                                    if(comment.type==2)
                                  {
                              html += ' <li><img src="http://youdingb.com/fenxiao/Admin/images/me.jpg" class="imgright spanright"><span class="spanright">'+comment.content+'</span></li>'
                             }

                             else
                                  {
                              html += ' <li><img src="http://youdingb.com/fenxiao/Admin/images/me.jpg" class="imgright spanright"><span class="spanright">'+comment.content+'</span></li>'
                             }


                                 }
                        });  
                 document.getElementById('main').innerHTML=html; //加载数据
				 onGetMessage();
               
              }
          })
 
 
 },1500)
 
 

    </script>     
</head>   
<body>  
    <div id="container">   
        <div class="header" onClick="onGetMessage()">  
            <span style="float: left;">客服</span>  
            <span style="float: right;"></span>  
        </div>  
        <ul class="content" id="main">    
   <!-- 欢迎加入qq群：454796847、135430763 -->  
            {volist name="data" id="vo"} 
			 
                 <li>
				 <img {if condition="$vo['type'] eq 1"} src="http://youdingb.com/fenxiao/Admin/images/kefu.jpg" class="imgright spanright"{/if}{if condition="$vo['type'] eq 0"}src="{$user.head_thumb}" class="imgleft spanleft"{/if}>
				  <span {if condition="$vo['type'] eq 1"}class="spanright"{/if}  {if condition="$vo['type'] eq 0"} class="spanleft"{/if}>{$vo.content}</span>
				 </li>
				 
            {/volist}
        </ul>  
		
        <div class="footer">  
            <div id="user_face_icon">  
                <img src="http://youdingb.com/fenxiao/Admin/images/kefu.jpg" alt="" id="imgs">  
            </div>  
            <input id="text" type="text" placeholder="说点什么吧...">  
            <span id="btn">发送</span>  
        </div>
		 <div id="msg_end" style="height:0px; overflow:hidden; margin-top:0px;"></div> 
    </div>  
</body>  
</html> 